<template>
  <div class="dashboard-container">
    <div class="set">
      <div class="user-name">
        <div class="dashboard-text">{{ name }}</div>
      </div>
      <router-link v-if="roles==='admin'" class="inlineBlock" to="/dashboard">
        <el-button round>charts</el-button>
      </router-link>
      <el-button  round @click="reStart()">重启插件</el-button>
      <el-button  round @click="checkUpdate()">检查更新</el-button>
      <el-button round @click="logout">退出登陆</el-button>
    </div>
    <div class="hd">
      <div class="title">
        <svg-icon icon-class="tree" />读取已存配置</div>
    </div>
    <div class="bd">
      <div class="item">
        <div class="read-set">
          <el-select v-model="defaultSet" placeholder="请选择" @change="readSet">
            <el-option v-for="item in list" :key="item.value" :label="item.default_set!==null?item.name+' (默认配置)':item.name"
              :value="item.id" />
          </el-select>
        </div>
        <div class="cartoon-button" @click="setDefault()">设置为默认配置</div>
      </div>
    </div>
    <div class="hd">
      <div class="title">
        <svg-icon icon-class="cut" />切图设置</div>
    </div>
    <div v-if="set!==null" class="bd">
      <div class="item">
        <el-input v-model="set.name" placeholder="">
          <template slot="prepend">配置名称</template>
        </el-input>
        <el-input v-model="set.ratio" placeholder="">
          <template slot="prepend">分辨率</template>
        </el-input>
        <el-input v-model="set.width" placeholder="">
          <template slot="prepend">文档宽度</template>
        </el-input>
        <el-input v-model="set.height" placeholder="">
          <template slot="prepend">最大高度</template>
        </el-input>
        <el-input v-model="set.margin_top" placeholder="">
          <template slot="prepend">首页预留</template>
        </el-input>
        <el-input v-model="set.margin_bottom" placeholder="">
          <template slot="prepend">尾页预留</template>
        </el-input>
        <el-input v-model="set.margin" placeholder="">
          <template slot="prepend">间距高度</template>
        </el-input>
        <el-input v-model="set.border_width" placeholder="">
          <template slot="prepend">描边粗细</template>
        </el-input>
        <el-input v-model="set.border_color_r">
          <template slot="prepend">描边颜色</template>
          <template slot="append">R</template>
        </el-input>
        <el-input v-model="set.border_color_g">
          <template slot="prepend">描边颜色</template>
          <template slot="append">G</template>
        </el-input>
        <el-input v-model="set.border_color_b">
          <template slot="prepend">描边颜色</template>
          <template slot="append">B</template>
        </el-input>
      </div>
    </div>
    <div class="bd">
      <div class="item">
        <div class="cartoon-button" @click="updateSet()">修改</div>
      </div>
    </div>
    <div class="bd">
      <div class="item">
        <el-popconfirm title="确定要删除此项配置吗？" @confirm="deleteSet">
          <div slot="reference" class="cartoon-button">删除</div>
        </el-popconfirm>

      </div>
    </div>
    <div class="bd">
      <div class="item">
        <div class="cartoon-button" @click="creatSet()">新建配置</div>
      </div>
    </div>
  </div>
</template>

<script>

  import {
    psScrpit,
    psEvent
  } from 'adobe/CSInterface'

  import {
    mapGetters
  } from 'vuex'

  import {
    getSetList,
    addSet,
    updSet,
    delSet
  } from '@/api/set'

  import {
    getUpdate,
    update
  } from '@/api/update'
  export default {
    name: 'Set',
    data() {
      return {
        loading: true,
        set: {
          name: '基本设置',
          width: 1440,
          ratio: 300,
          height: 15000,
          margin_top: 2000,
          margin_bottom: 1500,
          margin: 600,
          border_width: 6,
          border_color_r: 0,
          border_color_g: 0,
          border_color_b: 0,
        },
        list: null,
        defaultSet: '',
        hasUpdate: false,
      }
    },
    computed: {
      ...mapGetters([
        'name',
        'roles'
      ])
    },
    watch: {
      list: function(Value, oldValue) {
        if (this.list.length > 0) {
          this.set = this.list[0]
          this.defaultSet = this.list[0].id
          for (var i = 0; i < this.list.length; i++) {
            if (this.list[i].default_set !== null) {
              this.defaultSet = this.list[i].id
              this.set = this.list[i]
            }
          }
        }
      }
    },
    created() {
      this.getlist();
    },
    methods: {
      checkUpdate() {
        var that = this;
        psScrpit.evalScript('getPluginVersion()', function(data) {
          getUpdate(data).then(response => {
            if (response.data === 1) {
              that.$confirm('发现新的版本, 是否更新到最新版本?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                that.update();
                that.$message({
                  type: 'info',
                  message: '开始更新'
                });
              }).catch(() => {
                that.$message({
                  type: 'info',
                  message: '已取消'
                });
              });
            } else {
              that.hasUpdate = false;
              that.$message({
                type: 'info',
                message: '当前为最新版本'
              });
            }
          })
        });
      },
      update() {
        update().then(response => {
          var path = psScrpit.getSystemPath("extension");
          //jsx文件base64转uft8
          var jsxData = window.cep.encoding.convertion.b64_to_utf8(response.data.jsx);
          //写入jsx数据
          var writeJsxDataResult = window.cep.fs.writeFile(path+"/jsx/update.jsx", jsxData);
          console.log(writeJsxDataResult);
          //写入成功
           if (0 == writeJsxDataResult.err) {
            //signatures文件base64转uft8
            var signaturesData = window.cep.encoding.convertion.b64_to_utf8(response.data.signatures);
            //写入signatures数据
            var writeSignaturesDataResult = window.cep.fs.writeFile(path+"/META-INF/signatures.xml", signaturesData);
            console.log(writeSignaturesDataResult);
              //写入成功
              if (0 == writeSignaturesDataResult.err) {
                this.$confirm('升级完成点击确定重启插件', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'success'
                }).then(() => {
                  this.$message({
                    type: 'info',
                    message: '正在重启！'
                  });
                  this.reStart();
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '请手动重启！'
                  });
                });
              }else{
                this.$message.error('signatures升级失败！');
              }
           }
           else {
                this.$message.error('jsx升级失败！');
           }

        })
      },
      reStart() {
        setTimeout(function() {
          psScrpit.closeExtension();
        }, 100);
        psScrpit.evalScript("restartPlugin()");
      },
      readSet(value) {
        for (var i = 0; i < this.list.length; i++) {
          if (this.list[i].id === value) {
            this.set = this.list[i]
            this.defaultSet = this.list[i].id
          }
        }
      },
      deleteSet() {
        var data = {
          id: this.set.id
        }
        delSet(data).then(response => {
          if (response) {
            this.getlist();
            this.$message({
              message: '删除成功！',
              type: 'success',
              center: true
            });
          } else {
            this.$message.error('删除失败');
            return false
          }
        }).catch((error) => {
          console.log(error);
          this.$message.error(error);
        })
      },
      updateSet() {
        updSet(this.set).then(response => {
          if (response) {
            this.getlist();
            this.$message({
              message: '修改成功！',
              type: 'success',
              center: true
            });
          } else {
            this.$message.error('修改失败');
            return false
          }
        }).catch((error) => {
          this.$message.error(error);
        })
      },
      creatSet() {
        addSet(this.set).then(response => {
          if (response) {
            this.getlist();
            this.$message({
              message: '保存成功！',
              type: 'success',
              center: true
            });
          } else {
            this.$message.error('保存失败');
            return false
          }
        }).catch((error) => {
          console.log(error)
          this.$message.error(error);
        })
      },
      setDefault() {
        var data = {
          id: this.set.id,
          default_set: 1
        }
        updSet(data).then(response => {
          if (response) {
            this.getlist();
            this.$message({
              message: '修改成功！',
              type: 'success',
              center: true
            });
          } else {
            this.$message.error('修改失败');
            return false
          }
        }).catch((error) => {
          console.log(error);
          this.$message.error(error);
        })
      },
      getlist() {
        getSetList().then(
          response => {
            this.list = response.data
          })
      },
      logout() {
        this.$store.dispatch('LogOut').then(() => {
          location.reload() // 为了重新实例化vue-router对象 避免bug
        })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  .el-input-group__append,
  .el-input-group__prepend {
    min-width: 70px;
  }

  .el-message-box {
    width: 200px;
  }

  .el-message {
    min-width: 200px;
  }

  .dashboard-container {
    .set {
      text-align: center;
      margin: 20px 0;

      .el-button {
        border: 1px solid #141414;
        background: #4c4c4c;
        color: #ccc;
        font-size: 12px;
      }
    }
  }
</style>

<style rel="stylesheet/scss" lang="scss">
  .dashboard-container {
    .read-set {
      .el-select {
        width: 100%;

        .el-input__suffix {
          width: 28px;
          height: 28px;
          top: 0;
          right: 0;
          background: #424242;
          margin: 1px;
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;

          span {

            i {
              width: 28px;
              height: 28px;
              line-height: 28px;
              text-align: center;
              display: block;
            }
          }
        }
      }
    }

    .el-input {
      font-size: 12px;
      margin-bottom: 2px;

      .el-input-group__append,
      .el-input-group__prepend {
        padding: 0 10px;
        background: #464646;
        border-color: #1e1e1e;
        color: #dddddd;
      }

      .el-input__inner {
        background: #222222;
        color: #dddddd;
        border-color: #1e1e1e;
        height: 30px;
        line-height: 30px;
      }
    }
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard {
    &-container {
      font-size: 12px;

      .hd {
        font-size: 12px;
        padding: 10px 15px;
        border-bottom: 1px solid #141414;
        border-top: 1px solid #454545;

        .svg-icon {
          margin-right: 5px;
        }
      }

      .bd {
        padding: 6px 15px;
        border-bottom: 1px solid #141414;
        border-top: 1px solid #454545;

        .cartoon-button {
          display: block;
          text-align: center;
          border: 1px solid #141414;
          height: 30px;
          line-height: 28px;
          padding: 0 10px;
          margin-bottom: 1px;
          border-radius: 4px;
          background: #4c4c4c;
          cursor: pointer;
        }

        .cartoon-button:hover {
          background: #222222;
        }

        .el-checkbox-group {
          margin-bottom: 10px;
        }

        .button-group {
          .cartoon-button {
            float: left;
            width: 25%;
          }

          .cartoon-button:first-child {
            float: left;
            width: 50%;
          }

          .cartoon-button:not(:last-child) {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-right: none;
          }

          .cartoon-button:not(:first-child) {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
          }
        }

        .button-group:after {
          content: '';
          display: table;
          clear: both;
        }
      }
    }

    &-text {
      font-size: 14px;
      line-height: 46px;
    }

  }
</style>
